<template>
    <section>
        <!--搜索工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px; ">
            <el-form :inline="true" :model="filters" ref="searchForm" :rules="searchRules" label-width="80px">
                <el-form-item prop="year">
                    <el-select
                            placeholder="年份" v-model="filters.year" size="18px">
                        <el-option :key="item" :label="item" :value="item"
                                   v-for="item in options.years"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="check_unit_name">
                    <el-input
                            placeholder="院校名称"
                            v-model.trim="filters.check_unit_name">
                    </el-input>
                </el-form-item>
                <el-form-item prop="team_leader_name">
                    <el-input
                            placeholder="检查组组长"
                            v-model.trim="filters.team_leader_name">
                    </el-input>
                </el-form-item>
                <el-form-item prop="task_status">
                    <el-select
                            placeholder='下发状态' v-model="filters.task_status" size="18px">
                        <el-option
                                v-for="(item, value) in options.manager_notice_status"
                                :key="value"
                                :label="item"
                                :value="value"
                                   ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">搜索</el-button>
                    <el-button @click="reset">重置</el-button>
                </el-form-item>

                <el-form-item  style="float:right;">
                    <el-button type="primary" @click="handleAdd" icon="el-icon-plus">创建任务</el-button>
                </el-form-item>
            </el-form>
        </el-col>


        <!--搜索结果表格-->
        <el-table
                :header-row-style="headerRowStyle"
                :data="tableData"
                stripe
                v-loading="listLoading"
                style="width: 100%;">
            <el-table-column
                    label="序号"
                    type="index"
                    width="60"
                    align="center">
            </el-table-column>
            <el-table-column
                    align="right"  width="80" >
               <template slot-scope="scope">
                    <img v-if="scope.row.check_unit_logo" style="float:right; width:50px; height:50px;" :src="scope.row.check_unit_logo.path" class="avatar">
                </template>
            </el-table-column>
            <el-table-column
                    align="left"
                    style="float:left"
                    label="高校名称"
                    prop="check_unit_name">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="检查组组长"
                    prop="group_user_name">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="现场检查通知书下发状态"
                    :formatter="statusFormatter"
                    prop="task_status">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="创建时间"
                    prop="gmt_created">
            </el-table-column>
            <el-table-column label="操作" align="left" width="200">
                <template slot-scope="scope">
                    <el-button
                            type="primary" plain=""
                            @click="checkTaskDetail(scope.row.id)">详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <el-col :span="24" class="toolbar">
            <el-pagination
                    style="text-align: center;"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-size="pager.page_size"
                    :page-sizes="pager.sizes"
                    background
                    :current-page="pager.page_current"
                    layout="prev,pager,next,sizes,total"
                    :total="pager.total">
            </el-pagination>
        </el-col>

        <!--创建任务-->
        <el-dialog :visible.sync="dialogFormVisible" v-loading="dialogLoading" width="800px" title="创建检查任务" :close-on-click-modal='false'>
            <el-form :rules="itemRules"  label-width="4" ref="taskForm" :model="form">



                    <el-row>
                        <el-col :span="24">
                    <el-form-item label="高校" prop="unit_id_list">
                        <el-select v-model="form.unit_id_list" multiple filterable placeholder="请选择" width="300px">
                            <el-option
                                    v-for="item in universitys"
                                    :key="item.id"
                                    :label="item.unit_name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                        </el-col>
                    </el-row>



                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="检查组组长" prop="team_leader_id">
                                <el-select v-model="form.team_leader_id" filterable placeholder="请选择" width="300px">
                                    <el-option
                                            v-for="item in exports"
                                            :key="item.id"
                                            :label="item.full_name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>


                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="专家" prop="user_id_list">
                                <el-select v-model="form.user_id_list" multiple filterable placeholder="请选择" width="300px">
                                    <el-option
                                            v-for="item in exports"
                                            :key="item.id"
                                            :label="item.full_name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                         </el-col>
                    </el-row>


                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="观察员" prop="observer_id_list">
                                <el-select v-model="form.observer_id_list" multiple filterable placeholder="请选择" width="300px">
                                    <el-option
                                            v-for="item in users"
                                            :key="item.id"
                                            :label="item.full_name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <div class="clearfix" style="height:20px;text-align:center;padding:20px 0">

                        <el-button style="padding: 3px 0" type="primary" @click="add">创建</el-button>
                    </div>

            </el-form>
        </el-dialog>


        <!--任务详情-->
        <el-dialog :visible.sync="dialogDetailFormVisible" width="50%" >
            <el-form :inline="true"   label-width="280px"  :model="detail">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span style="font-weight: bold">任务详情</span>
                        <el-button style="float: right; padding: 3px 0;" type="danger" @click="deleteTask">删 除</el-button>
                    </div>

                  <el-row>
                    <el-col :span="24">
                        <div style="margin-top:20px">
                        <span style="font-weight: bold">高校</span>
                            <br>
                        <span>{{detail.check_unit_name}}</span>
                            <hr style="height:1px;border:none;border-top:1px solid darkgrey;" />
                        </div>
                    </el-col>
                    </el-row>
                    <br>
                    <el-row>
                        <el-col :span="24">
                            <div style="margin-top:20px">
                                <span style="font-weight: bold">检查组组长</span>
                                <br>
                                <span>{{detail.group_user_name}}</span>
                                <hr style="height:1px;border:none;border-top:1px solid darkgrey;" />
                            </div>
                        </el-col>
                    </el-row>
                    <br>
                    <el-row>
                        <el-col :span="24">
                            <div style="margin-top:20px;">
                                <span style="font-weight: bold">专家</span>
                                <br>
                                <div  class="text item" style="display:inline-block">
                                    <span  v-for="o in detail.check_user" :key="o.id" style="float:left;margin-right:24px">{{o.full_name}}  </span>
                                </div>
                                <br>
                                <hr style="height:1px;border:none;border-top:1px solid darkgrey;" />
                            </div>
                        </el-col>
                     </el-row>

                    <el-row>
                        <el-col :span="24">
                            <div style="margin-top:20px;">
                                <span style="font-weight: bold">观察员</span>
                                <br>
                                <div  class="text item" style="display:inline-block">
                                    <span  v-for="o in detail.observer_user" :key="o.id" style="float:left;margin-right:24px">{{o.full_name}}  </span>
                                </div>
                                <br>
                                <hr style="height:1px;border:none;border-top:1px solid darkgrey;" />
                            </div>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="24">
                            <div style="width:200px;margin-top:20px;">
                                <span style="font-weight: bold;margin-right:10px">创建日期</span><span>{{detail.gmt_created}}</span>
                            </div>
                        </el-col>
                    </el-row>
                </el-card>

            </el-form>
        </el-dialog>
    </section>
</template>

<script>
    import {addTask,getTasksList,getTasksDetail,delTask} from '../../api/task_manager_api'
    import dict from '../../common/js/dict';
    import {universityNonPaged,userNoPageNoAdminList,userNoPageList} from '../../api/auth_api';
    import {get_update_img} from "../../api/common";
    export default {
        name:'taskList',
        data() {
            var validUserList = (rule, value, callback) => {
                if (this.form.user_id_list.indexOf(this.form.team_leader_id) > -1) {
                    callback(new Error('不能包含已经被选为检查组组长的专家'));
                } else {
                    callback();
                }
            };
            return {
                //表单header样式
                headerRowStyle: {
                    backgroundColor: "#ddd",
                    color: "#333",
                    textAlign: "center"
                },
                listLoading: false,
                //表格数据
                tableData: [],
                currentYear:'2018',
                dict:dict,
                filters: {
                    year: '',
                    check_unit_name: '',
                    task_status: '',
                    team_leader_name:''//组长
                },
                //分页设置
                pager: {
                    sizes: [10, 20, 30, 40, 50],
                    total: 0,
                    page_size: 10,
                    page_current: 1
                },

                dialogFormVisible:false,
                dialogDetailFormVisible:false,
                //添加
                dialogLoading:false,
                form: {
                    unit_id_list:[],
                    team_leader_id:"",
                    user_id_list:[],
                    observer_id_list:[]
                },
                exports:[],
                users:[],
                universitys: [],
                searchRules:{
                    year:{required:true,message:'请选择年份',trigger:'blur'}
                },
                itemRules: {

                    unit_id_list: [
                        {required: true, message: '请选择高校', trigger: 'change'}
                    ],
                    team_leader_id:[
                        {required:true,message:'请选择检查组组长',trigger:'change'}
                    ],
                    user_id_list:[
                        {required:true,message:"请选择专家",trigger:'change'},
                        {validator: validUserList, trigger: 'change'}
                    ]
                },
                detail:{
                    id:'',
                    check_unit_name:'',
                    check_unit_logo:'',
                    group_user_name:'',
                    check_user:[{}],
                    observer_user:[]
                },
                options: {
                    years: [],
                    manager_notice_status:dict.manager_notice_status
                }
            }
        },
        methods: {
            formatFileType(val) {
                return this.options.file_type[val.file_type];
            },
            // 详情
            view(id) {
                let params ={
                    id:id
                }
                getTasksDetail(params).then((res)=>{
                    if(res.status==200) {
                        this.detail = JSON.parse(res.data.datas);
                        this.dialogDetailFormVisible=true;
                    }else{
                        this.$message.error(res.status + " " + res.msg);
                    }
                });
            },
            //分页page_size发生改变
            handleSizeChange(val) {
                this.pager.page_current = 1;
                this.pager.page_size = val;
                this.getTasks();
            },
            //分页page_current发生改变
            handleCurrentChange(val) {
                this.pager.page_current = val;
                this.getTasks();
            },
            search(){
                this.pager.page_current = 1;
                this.getTasks();
            },
            getTasks(){
                this.$refs['searchForm'].validate((valid) => {
                    if (valid) {
                        this.listLoading = true;  //显示loading

                        let condition = this.filters;
                        let params = {
                            page_size: this.pager.page_size,
                            page_current: this.pager.page_current,
                            condition: condition
                        };
                        getTasksList(params).then((res) => {
                            if (res.data.status == 200) {
                                this.listLoading = false;  //隐藏loading

                                let result = JSON.parse(res.data.datas);
                                this.tableData = result.items;
                                this.pager.total = result.total;
                            } else {
                                if (res.data.status == 401) {
                                    this.$router.push('/login');
                                }
                                this.$message.error(res.data.status + " " + res.data.msg);
                            }
                        });
                    }
                    })
            },
            reset(){
                this.$refs['searchForm'].resetFields();
                this.filters.check_unit_name='';
                this.filters.team_leader_name='';
                this.filters.year=this.currentYear;
                this.pager.page_current = 1;
                this.getTasks();
                },
            initYears() {
                this.currentYear = (new Date()).getFullYear();
                this.filters.year = this.currentYear;

                for (let i = this.currentYear; i >= 2018; i--) {
                    this.options.years.push(i);
                }
            },
            //初始化页面
            initData() {
                this.initYears();
                this.getTasks();
                this.getUniversityList();
                this.getExpertsList();
            },
            handleAdd() {

                this.dialogFormVisible = true;
                this.$nextTick(() =>{
                    this.$refs['taskForm'].resetFields();
                })

                //this.$router.push('/tasks/create');
            },
            // 检查任务详情
            checkTaskDetail(id) {
                this.$router.push('/tasks/detail/' + id);
            },
            //获取高校
            getUniversityList(){

                universityNonPaged().then(res=>{
                    if(res.status == 200){
                        this.universitys=JSON.parse(res.data.datas);
                    }
                });
            },
            //获取教育部用户列表  null:超管   1:专家  2:教育部、专家
            getExpertsList(){
                let params = {
                    "role_id":2
                }
                userNoPageNoAdminList(params).then(res=>{
                    if(res.status ==200){
                        this.users = JSON.parse(res.data.datas);
                    }
                    //获取专家用户列表
                    let param ={
                        "role_id":1
                    }//获取用户
                    userNoPageNoAdminList(param).then(res=>{
                        if(res.status ==200){
                            this.exports = JSON.parse(res.data.datas);
                        }
                    })
                })
            },
            add(){
                this.$refs['taskForm'].validate((valid) => {
                    if (valid) {
                        this.dialogLoading = true;  //显示loading
                        let params = this.form;
                        addTask(params).then((res)=>{
                            if(res.data.status == 200){
                                this.$message({
                                    type: 'success',
                                    message: res.data.msg
                                });
                                this.dialogLoading = false;
                                this.dialogFormVisible = false;
                                this.getTasks()
                            } else {
                                if (res.data.status == 401) {
                                    this.$router.push('/login');
                                }
                                this.$message.error(res.data.status + " " + res.data.msg);
                            }
                        });

                    }
                });

            },
            deleteTask(){
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delTask({id: this.detail.id}).then((res) => {
                        if (res.data.status) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.dialogDetailFormVisible = false;
                            this.getTasks()
                        }
                    });
                });
            },
            statusFormatter(row) {
                return this.dict.tasks_status[row.task_status]
            }
        },
        mounted() {
            this.$nextTick(function () {
                this.initData();
            })
        }
    }
</script>

<style scoped>

</style>
